<template>
  <s-page custom-class="Radio-Page">
    <view class="container">
      <c-demo-block title="基础用法">
        <s-radio-group v-model="checked">
          <s-row :gutter="40">
            <s-col>
              <s-radio :name="1" label="单选框 1" />
            </s-col>
            <s-col>
              <s-radio :name="2" label="单选框 2" />
            </s-col>
          </s-row>
        </s-radio-group>
      </c-demo-block>

      <c-demo-block title="竖向排列">
        <s-radio-group v-model="checked">
          <s-row :gutter-y="20">
            <s-col :span="24">
              <s-radio :name="1" label="单选框 1" />
            </s-col>
            <s-col :span="24">
              <s-radio :name="2" label="单选框 2" />
            </s-col>
          </s-row>
        </s-radio-group>
      </c-demo-block>

      <c-demo-block title="禁用状态">
        <s-radio-group v-model="checked" disabled>
          <s-row :gutter="40">
            <s-col>
              <s-radio :name="1" label="单选框 1" />
            </s-col>
            <s-col>
              <s-radio :name="2" label="单选框 2" />
            </s-col>
          </s-row>
        </s-radio-group>
      </c-demo-block>

      <c-demo-block title="形状">
        <s-radio-group v-model="checked">
          <s-row :gutter="40">
            <s-col>
              <s-radio :name="1" shape="square" label="单选框 1" />
            </s-col>
            <s-col>
              <s-radio :name="2" shape="square" label="单选框 2" />
            </s-col>
          </s-row>
        </s-radio-group>
      </c-demo-block>

      <c-demo-block title="颜色">
        <s-radio-group v-model="checked" checked-color="red">
          <s-row :gutter="40">
            <s-col>
              <s-radio :name="1" label="单选框 1" />
            </s-col>
            <s-col>
              <s-radio :name="2" label="单选框 2" />
            </s-col>
          </s-row>
        </s-radio-group>
      </c-demo-block>

      <c-demo-block title="图标大小">
        <s-radio-group v-model="checked">
          <s-row :gutter="40">
            <s-col>
              <s-radio :icon-size="50" :name="1" label="单选框 1" />
            </s-col>
            <s-col>
              <s-radio shape="square" :icon-size="50" :name="2" label="单选框 2" />
            </s-col>
          </s-row>
        </s-radio-group>
      </c-demo-block>

      <c-demo-block title="与 Cell 组件一起使用">
        <s-radio-group v-model="checked">
          <s-cell title="单选框 1" @click="checked = 1">
            <view slot="right" @click.stop>
              <s-radio :name="1" />
            </view>
          </s-cell>
          <s-cell title="单选框 2" @click="checked = 2">
            <view slot="right" @click.stop>
              <s-radio :name="2" />
            </view>
          </s-cell>
        </s-radio-group>
      </c-demo-block>

      <c-demo-block title="自定义渲染">
        <s-radio-group v-model="checked">
          <s-row :gutter="20">
            <s-col>
              <s-radio :name="1">
                <s-button hover-class="none" type="primary" :plain="checked !== 1">单选框 1</s-button>
              </s-radio>
            </s-col>
            <s-col>
              <s-radio :name="2">
                <s-button hover-class="none" type="primary" :plain="checked !== 2">单选框 2</s-button>
              </s-radio>
            </s-col>
          </s-row>
        </s-radio-group>
      </c-demo-block>
    </view>
  </s-page>
</template>

<script>
export default {
  data: () => ({
    checked: 1,
  }),
  methods: {},
  onLoad() { },
};
</script>

<style lang="scss">
.Radio-Page {
  .container {
    padding: 0 $padding-md;
  }
}
</style>
